Adding Legends

Selecting the right legend

Muze provides ability to encode your information into different color, shape or size . Like different categorial values can be broken into multiple colors or shape where as a quantitative value can be encoded into different size ranges.

Muze supports following types of legend :

• Discrete Legends
  • Color Legend
  • Shape Legend
  • Size Legend
• Continuous Legends
  • Gradient Legend
  • Step Legend

Adding a discrete color legend

Color Legends can be used to show both categorical data and quantitative values. If fieldName is dimension , then a discrete legend is created.

muze.canvas().color("Cylinders");

const { muze, getDataFromSearchQuery, env } = viz;
const data = getDataFromSearchQuery();

const RowField = "Miles_per_Gallon";
const ColumnField = "Origin";
const ColorField = "Cylinders";

muze
  .canvas()
  .data(data)
  .rows([RowField])
  .columns([ColumnField])
  .color(ColorField)
  .mount("#chart");

Adding a Gradient Legend

Gradient legend can be added in muze by adding a measure field in color.

When you add a measure field in color, Muze automatically colors the plots using the measure and adds a gradient legend.

muze.canvas().color("Horsepower");

const { muze, getDataFromSearchQuery, env } = viz;
const data = getDataFromSearchQuery();

const RowField = "Miles_per_Gallon";
const ColumnField = "Origin";
const ColorField = "Horsepower";

muze
  .canvas()
  .data(data)
  .rows([RowField])
  .columns([ColumnField])
  .color(ColorField)
  .mount("#chart");

Adding a size and shape Legend

Size Legend

Size legends are mostly used to encode measure.

Below are the ways a Size Legend can be configured.

...
  muze.canvas().size('Miles_per_Gallon');
...

const { muze, getDataFromSearchQuery, env } = viz;
const data = getDataFromSearchQuery();

const RowField = "Weight_in_lbs";
const ColumnField = "Horsepower";
const DetailField = "Name";
const SizeField = "Miles_per_Gallon";

muze
  .canvas()
  .data(data)
  .rows([RowField])
  .columns([ColumnField])
  .detail([DetailField])
  .size(SizeField)
  .mount("#chart");

• You can give number of stops or a custom range

...
  muze.canvas().size({
    field : 'Horsepower',
    stops : 10,
   //stops : [20,30,50,120]
  })
...

const { muze, getDataFromSearchQuery, env } = viz;
const data = getDataFromSearchQuery();
const RowField = "Displacement";
const ColumnField = "Miles_per_Gallon";
const SizeFieldProp = "Horsepower";
const DetailField = "Maker";

muze
  .canvas()
  .data(data)
  .rows([RowField])
  .columns([ColumnField])
  .size({
    field: SizeFieldProp,
    stops: 10,
  })
  .detail([DetailField])
  .mount("#chart");

Shape Legend

Shape legend are mostly used for categorical data visualisation.

Below are the ways a Shape Legend can be configured.

...
  muze.canvas().shape('Cylinders');
...

const { muze, getDataFromSearchQuery, env } = viz;
const data = getDataFromSearchQuery();
const RowField = "Displacement";
const ColumnField = "Miles_per_Gallon";
const ShapeField = "Cylinders";
const DetailField = "Maker";

muze
  .canvas()
  .data(data)
  .rows([RowField])
  .columns([ColumnField])
  .shape(ShapeField)
  .detail([DetailField])
  .mount("#chart");

Customizing the legend

Legends can be customized in different ways like changing position, alignment of text, icon size and more.

Below are the ways how legend can be customized.

Position

....
  canvas.config({
    legend: {
      position: 'bottom'
    }
  });
....

const { muze, getDataFromSearchQuery, env } = viz;
const data = getDataFromSearchQuery();

const RowField = "Acceleration";
const ColumnField = "Cylinders";
const ColorField = "Cylinders";
muze
  .canvas()
  .rows([RowField])
  .columns([ColumnField])
  .data(data)
  .config({
    legend: {
      position: "bottom",
    },
  })
  .color(ColorField)
  .mount("#chart");